<template>
  <div class="release-root">
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      style="width: 80%"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="标题" name="title">
        <a-input v-model:value="formState.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item label="类型" name="type">
        <a-select
          style="width: 175px"
          placeholder="请选择通知类型"
          v-model:value="formState.type"
        >
          <a-select-option value="1"> 紧急 </a-select-option>
          <a-select-option value="2"> 普通 </a-select-option>
          <a-select-option value="3"> 正常 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="内容" name="context">
        <a-textarea
          placeholder="输入内容"
          allow-clear
          :autoSize="{ minRows: 5 }"
          v-model:value="formState.context"
        />
      </a-form-item>
    </a-form>
    <a-row :gutter="[20, 18]">
      <a-col :span="3"> </a-col>
      <a-col :span="14"
        ><a-button type="primary" @click="onSubmit">发布</a-button></a-col
      >
    </a-row>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
import { reactive, ref } from "vue";

export default {
  data() {
    return {
      labelCol: { span: 4 }, //表单标签宽度配置
      wrapperCol: { span: 14 }, //表单输入框宽度配置
      formState: {
        title: undefined,
        type: undefined,
        context: undefined,
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择消息类型",
            trigger: "change",
          },
        ],
        context: [
          {
            required: true,
            message: "请选择通知正文",
            trigger: "change",
          },
        ],
      },
    };
  },

  methods: {
    onSubmit() {
      this.$refs.formRef
        .validate()
        .then(() => {
          this.$axios
            .post("admin/message/release", {
              msgType: this.formState.type,
              msgContext: this.formState.context,
              msgTitle: this.formState.title,
            })
            .then((res) => {
              if (res.data.code == 2000) {
                message.success("发布成功");
                this.$refs.formRef.resetFields();
              } else {
                message.error("发布失败");
              }
            });
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.release-root {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
</style>